<template>
  <div class="hello">
    <img alt="Vue logo" src="../assets/logo.png" @click="changeShow">
    <transition name="hello" mode="out-in">
      <h1 v-if="show" key="your">Welcome to Your Vue.js App</h1>
      <h1 v-else-if="showNew" key="new">Welcome to new Vue.js</h1>
      <h1 v-else-if="showChinese" key="chinese">欢迎来到你的Vue.js App</h1>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      show: true,
      showNew: false,
      showChinese: false,
      count: 3,
    }
  },
  methods: {
    changeShow(){
      if(this.count % 3 === 0){
        this.show = true;
        this.showNew = false;
        this.showChinese = false;
      }else if(this.count  % 3 === 2) {
        this.show = false;
        this.showNew = true;
        this.showChinese = false;
      }else {
        this.show = false;
        this.showNew = false;
        this.showChinese = true;
      }

      this.count ++ ;
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .hello-enter-active,
  .hello-leave-active {
    transition: all 1s;
  }

  .hello-enter-to,
  .hello-leave {
    transform: translateX(0px)
  }

  .hello-leave-to,
  .hello-enter {
    transform: translateX(-100vw)
  }
</style>
